<template>
	<div class="Detail">
		<!-- 返回组件 -->
		<div class="backView">
			<DetailsBack :cate="event.cate" :subName="subName" @post-subname="postSubName"></DetailsBack>
		</div>

		<!-- 营养素列表 -->
		<div class="nutrition">
			<NutritionList :Nutrition="Nutrition" :order="order" @toggle-nutrition="toggleNutrition"
				@order-by="orderBy"></NutritionList>
		</div>

		<!-- 数据列表 -->
		<scroll-view class="listView" scroll-y="true" @scrolltolower="scrolltolower" v-if="isShow">
			<!-- 下拉触底加载动画 -->
			<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
			<template v-if="DetailsList.length != 0">
				<!-- 食物数据 -->
				<DetailsListItem v-for="(food, index) in DetailsList" :key="index" :food="food" :Nutrition="Nutrition">
				</DetailsListItem>
			</template>
			<template v-else>
				<van-empty image="error" description="数据为空" />
			</template>
		</scroll-view>

		<u-loading-page :loading="!isShow" loading-text="loading..."></u-loading-page>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				event: {}, //App.vue传过来的类别
				DetailsList: [], //数据列表
				subName: {
					id: 0,
					name: "全部"
				}, //亚类
				Nutrition: {
					index: 1,
					name: "营养素排序"
				}, //营养素
				isShow: false, //加载状态
				isLoading: false, //触底加载
				page: 1, //分页
				order: 0, //默认降序
			};
		},
		watch: {
			DetailsList: function() {
				this.setItem();
			},
		},
		methods: {
			scrolltolower() {
				// this.isLoading = true;
				this.page++;
				this.LoadingData();
			},
			postSubName: function(event) {
				this.subName = event;
				this.page = 1;
				this.LoadingData();
			},
			toggleNutrition: function(event) {
				this.Nutrition = event;
				this.page = 1;
				this.LoadingData();
			},
			orderBy: function(event) {
				this.page = 1;
				this.order = event;
				this.LoadingData();
			},
			setItem: function() {
				const info = {
					event: this.event,
					DetailsList: this.DetailsList,
					subName: this.subName,
					Nutrition: this.Nutrition,
					page: this.page,
					order: this.order,
				};
				uni.setStorageSync("info", JSON.stringify(info))
				// localStorage.setItem("info", JSON.stringify(info));
			},
			getItem: function() {
				try {
					const data = JSON.parse(uni.getStorageSync('info'));
					if (data) {
						this.event = data.event;
						this.DetailsList = data.DetailsList;
						this.Nutrition = data.Nutrition;
						this.subName = data.subName;
						this.page = data.page;
						this.order = data.order;
					}
				} catch (e) {
					// error
				}
			},
			LoadingData: function() {
				// subName: {} 亚类
				// Nutrition: {} 营养素
				// page 分页
				// this.event.kind 主类型
				// this.event.cate.id 子类型id
				// order_asc 0 降序 1 升序

				let kind = `kind=${this.event.kind}`;
				let value = `value=${this.event.cate.id}`;
				let sub_value = `sub_value=${this.subName.id}`;
				let order_by = `order_by=${this.Nutrition.index}`;
				let order_asc = `order_asc=${this.order}`;
				let page = `page=${this.page}`;
				if (this.page > 1) {
					this.isLoading = true;
				} else {
					this.isShow = false;
				}
				if (this.subName.name == "全部" && this.Nutrition.name == "营养素排序") {
					uni.request({
						url: `https://food.boohee.com/fb/v1/foods?${kind}&${value}&order_by=1&${page}&${order_asc}`,
						success: (res) => {
							if (this.page > 1) {
								if (res.data.foods.length == 0) {
									uni.showToast({
										title: '无更多数据',
										icon: 'none'
									})
								} else {
									this.DetailsList = this.DetailsList.concat(res.data.foods);
								}
							} else {
								this.DetailsList = res.data.foods;
							}
							this.isShow = true;
							this.isLoading = false;
						}
					})
				} else if (
					this.subName.name != "全部" &&
					this.Nutrition.name == "营养素排序"
				) {
					uni.request({
						url: `https://food.boohee.com/fb/v1/foods?${kind}&${value}&order_by=1&${sub_value}&${page}&${order_asc}`,
						success: (res) => {
							if (this.page > 1) {
								if (res.data.foods.length == 0) {
									uni.showToast({
										title: '无更多数据',
										icon: 'none'
									})
								} else {
									this.DetailsList = this.DetailsList.concat(res.data.foods);
								}
							} else {
								this.DetailsList = res.data.foods;
							}
							this.isShow = true;
							this.isLoading = false;
						}
					})

				} else if (
					this.subName.name == "全部" &&
					this.Nutrition.name != "营养素排序"
				) {
					if (this.order == 1) {
						uni.request({
							url: `https://food.boohee.com/fb/v1/foods?${kind}&${value}&${order_by}&${page}&${order_asc}`,
							success: (res) => {
								if (this.page > 1) {
									if (res.data.foods.length == 0) {
										uni.showToast({
											title: '无更多数据',
											icon: 'none'
										})
									} else {
										this.DetailsList = this.DetailsList.concat(res.data.foods);
									}
								} else {
									this.DetailsList = res.data.foods;
								}
								this.isShow = true;
								this.isLoading = false;
							}
						})
					} else {
						uni.request({
							url: `https://food.boohee.com/fb/v1/foods?${kind}&${value}&${order_by}&${page}&${order_asc}`,
							success: (res) => {
								if (this.page > 1) {
									if (res.data.foods.length == 0) {
										uni.showToast({
											title: '无更多数据',
											icon: 'none'
										})
									} else {
										this.DetailsList = this.DetailsList.concat(res.data.foods);
									}
								} else {
									this.DetailsList = res.data.foods;
								}
								this.isShow = true;
								this.isLoading = false;
							}
						})
					}
				} else if (
					this.subName.name != "全部" &&
					this.Nutrition.name != "营养素排序"
				) {
					uni.request({
						url: `https://food.boohee.com/fb/v1/foods?${kind}&${value}&${order_by}&${sub_value}&${page}&${order_asc}`,
						success: (res) => {
							if (this.page > 1) {
								if (res.data.foods.length == 0) {
									uni.showToast({
										title: '无更多数据',
										icon: 'none'
									})
								} else {
									this.DetailsList = this.DetailsList.concat(res.data.foods);
								}
							} else {
								this.DetailsList = res.data.foods;
							}
							this.isShow = true;
							this.isLoading = false;
						}
					})
				}
			}
		},

		onLoad(options) {
			this.event = JSON.parse(options.event);
			uni.request({
				url: `https://food.boohee.com/fb/v1/foods?kind=${this.event.kind}&value=${this.event.cate.id}&order_by=1&page=1&order_asc=0`,
				success: (res) => {
					this.DetailsList = res.data.foods;
					this.isShow = true;

					if (this.DetailsList.length != 0) {
						this.setItem();
					}
					this.getItem();
				}
			})
		}
	}
</script>

<style lang="scss">
	.Detail {
		width: 100%;
		min-height: 100vh;

		.listView {
			overflow-y: auto;
			height: 85vh;
			position: relative;

			.loadig {
				position: fixed;
				left: 45%;
				right: 45%;
				z-index: 6;
			}
		}
	}
</style>
